<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 组件</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/httpVueLoader.js"></script>
</head>
<body>

    <div id="vm">
        {{message}}
        <hr>
        <prop-val post-title="AAAAA" post-title2="BBBB" :post-list="fruits" :post-fn="parentFn" @func="getMsgFromSon"></prop-val>
    </div>

    <script>
        var vm = new Vue({
            el: '#vm',
            data: {
                message: 'Hello Vue!',
                fruits: [
                    {
                        id: 1,
                        name: '苹果',
                        price: 2.5
                    },
                    {
                        id: 2,
                        name: '水蜜桃',
                        price: 5.3
                    },
                    {
                        id: 3,
                        name: '莱阳梨',
                        price: 3.5
                    },
                    {
                        id: 4,
                        name: '地雷瓜',
                        price: 1.9
                    },
                    {
                        id: 5,
                        name: '榴莲',
                        price: 21
                    }
                ]
            },
            components: {
                // 将组建加入组建库
                'prop-val': httpVueLoader('./component/prop-val.vue'),
            },
            methods:{
                parentFn(){
                    alert('这是来自父组件的方法 parentFn');
                },
                //接收子组件传参
                getMsgFromSon(data){
                    console.log('来自子组件->',data);
                }
            }
        })
    </script>
    
</body>
</html>